@import 'compass';
@import 'options'; // EDIT STYLES AND OPTIONS IN _options.scss
@import 'danger';
@import 'glow';


//////////////////////////////////////////////////////////
// "INHERIT-SAFE" FONT SIZES /////////////////////////////
//////////////////////////////////////////////////////////
// If user elects to use font-size: inherit in _options
// leave out calcs which result in inherit2 etc.
$unicorn-btn-smallfs: inherit;
$unicorn-btn-tinyfs: inherit;
$unicorn-btn-largefs: inherit;
@if $unicorn-btn-font-size != inherit {
    $unicorn-btn-largefs: $unicorn-btn-font-size + 5;
    $unicorn-btn-tinyfs: $unicorn-btn-font-size - 2;
    $unicorn-btn-smallfs: $unicorn-btn-font-size + 1;
}

//////////////////////////////////////////////////////////
// BUTTON BASE STYLES ////////////////////////////////////
//////////////////////////////////////////////////////////
#{$unicorn-btn-namespace} {
    @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .15));
    background-color: $unicorn-btn-bgcolor;
    @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 5%), darken($unicorn-btn-bgcolor, 5%)));
    @include inline-block(middle);
    border: 1px solid darken($unicorn-btn-bgcolor, 10%);
    height: $unicorn-btn-height;
    line-height: $unicorn-btn-height;
    padding: 0px ($unicorn-btn-height * .8);
    font-weight: $unicorn-btn-font-weight;
    font-size: $unicorn-btn-font-size;
    font-family: $unicorn-btn-font-family;
    color:  $unicorn-btn-font-color;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
    margin: 0;
    text-decoration: none;
    text-align: center;

    &:hover {
        background-color: $unicorn-btn-bgcolor;
        @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 10%), darken($unicorn-btn-bgcolor, 7%)));
    }
    &:active {
        @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
        text-shadow: 0px 1px 0px rgba(255, 255, 255, .4);
        background: desaturate($unicorn-btn-bgcolor, 20%);
        color: darken($unicorn-btn-bgcolor, 20%);
    }
    &:focus {
        outline: none;
    }
}

//HEIGHT NEEDED FOR FORM ELEMENTS
input#{$unicorn-btn-namespace}, button#{$unicorn-btn-namespace} {
    height: $unicorn-btn-height + 2;
    cursor: pointer;
    -webkit-appearance: none;
}

// BLOCK BUTTON
#{$unicorn-btn-namespace}-block {
    display: block;
}

// DISABLED STATE
#{$unicorn-btn-namespace}.disabled,
#{$unicorn-btn-namespace}.disabled:hover,
#{$unicorn-btn-namespace}.disabled:active,
input#{$unicorn-btn-namespace}:disabled,
button#{$unicorn-btn-namespace}:disabled {
    @include box-shadow(0px 1px 2px rgba(0, 0, 0, .10));
    @include opacity(.8);
    background: #EEE;
    border: 1px solid #DDD;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
    color: #CCC;
    cursor: default;
    -webkit-appearance: none;
}

// WRAPPER EFFECT
#{$unicorn-btn-namespace}-wrap {
    @include background(linear-gradient(top,  #e3e3e3, #f2f2f2));
    @include border-radius(200px);
    @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, 0.04));
    padding: 10px;
    display: inline-block;
}

// FLAT BUTTON BASE
@if $unicorn-btn-build-flat {
    #{$unicorn-btn-namespace}-flat {
        $unicorn-btn-background: $unicorn-btn-bgcolor;
        @include box-shadow(none);
        @include transition-property(background);
        @include transition-duration(.3s);
        background: $unicorn-btn-background;
        border: none;
        text-shadow: none;

        &:hover {
            background: lighten($unicorn-btn-background, 5%);
        }
        &:active {
            @include transition-duration(0s);
            background: desaturate($unicorn-btn-background, 20%);
            color: darken($unicorn-btn-background, 20%);
        }
        &.disabled {
            @include box-shadow(none);
            -webkit-appearance: none;
        }
    }
}


// BORDER BUTTON BASE
@if $unicorn-btn-build-flat {
    #{$unicorn-btn-namespace}-border {
        @include box-shadow(none);
        @include transition-property(all);
        @include transition-duration(.3s);
        color: $unicorn-btn-font-color;
        border: 2px solid $unicorn-btn-font-color;
        background: none;
        text-shadow: none;

        &:hover {
            background: none;
            color: lighten($unicorn-btn-font-color, 10%);
            border: 2px solid lighten($unicorn-btn-font-color, 10%);
        }
        &:active {
            @include transition-duration(0s);
            background: none;
            color: darken($unicorn-btn-font-color, 10%);
            border: 2px solid darken($unicorn-btn-font-color, 10%);
        }
        &.disabled {
            @include box-shadow(none);
            -webkit-appearance: none;
        }
    }
}


// 3D BUTTON BASE
@if $unicorn-btn-build-3d {
    #{$unicorn-btn-namespace}-3d {
        @include transition-property(all);
        @include transition-duration(.3s);
        @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
        @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 2%), darken($unicorn-btn-bgcolor, 2%)));
        background-color: $unicorn-btn-bgcolor;
        color: $unicorn-btn-font-color;
        border: 1px solid darken($unicorn-btn-bgcolor, 5%);
        text-shadow: none;
        position: relative;
        top: 0px;

        &:hover {
            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
            @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 8%), darken($unicorn-btn-bgcolor, 1%)));
            background-color: lighten($unicorn-btn-bgcolor, 10%);
        }
        &:active {
            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-bgcolor, 20%), 0px 3px 3px rgba(0, 0, 0, .2));
            @include background(linear-gradient(top,  darken($unicorn-btn-bgcolor, 2%), lighten($unicorn-btn-bgcolor, 2%)));
            background-color: desaturate($unicorn-btn-bgcolor, 20%);
            color: darken($unicorn-btn-bgcolor, 20%);
            border: 1px solid darken($unicorn-btn-bgcolor, 5%);
            top: 5px;
        }
        &.disabled {
            @include box-shadow(none);
            -webkit-appearance: none;
        }
    }
}


//////////////////////////////////////////////////////////
// SHAPES ////////////////////////////////////////////////
//////////////////////////////////////////////////////////
@each $unicorn-btn-style in $unicorn-btn-types {

    // .button-rounded .button-pill button-circle
    #{$unicorn-btn-namespace}-#{$unicorn-btn-style} {

        @if $unicorn-btn-style == 'rounded' {
            @include border-radius(3px);
        }

        @else if $unicorn-btn-style == 'pill' {
            @include border-radius(50px);
        }

        @else if $unicorn-btn-style == 'circle' {
            @include border-radius($unicorn-btn-circle-size * 2);
            @include box-shadow(inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .20));
            width: $unicorn-btn-circle-size;
            line-height: $unicorn-btn-circle-size;
            height: $unicorn-btn-circle-size;
            padding: 0px;
            border-width: 4px;
            font-size: $unicorn-btn-largefs;
        }
    }
}


//////////////////////////////////////////////////////////
// ACTION STYLES /////////////////////////////////////////
//////////////////////////////////////////////////////////
@each $unicorn-btn-action in $unicorn-btn-actions {
    //GET NAME & COLOR
    $unicorn-btn-name: nth($unicorn-btn-action, 1);
    $unicorn-btn-background: nth($unicorn-btn-action, 2);
    $unicorn-btn-color: nth($unicorn-btn-action, 3);

    // .button-primary .button-action etc.
    #{$unicorn-btn-namespace}-#{$unicorn-btn-name} {
        @include background(linear-gradient(top,  lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
        background-color: $unicorn-btn-background;
        border-color: darken($unicorn-btn-background, 10%);
        color: $unicorn-btn-color;
        text-shadow: 0 -1px 1px rgba(darken($unicorn-btn-background, 30%), 0.35);

        &:hover {
            background-color: $unicorn-btn-background;
            @include background(linear-gradient(top,  lighten($unicorn-btn-background, 10%), darken($unicorn-btn-background, 5%)));
        }
        &:active {
            background: desaturate($unicorn-btn-background, 20%);
            color: darken($unicorn-btn-background, 20%);
        }
    }


    /////////////////////////////
    //3D BUTTON STYLES //////////
    ////////////////////////////
    @if $unicorn-btn-build-3d {

        // .button-border-primary .button-border-action etc.
        #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name} {
            @include transition-property(all);
            @include transition-duration(.3s);
            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 10%), 0px 8px 3px rgba(0, 0, 0, .30));
            @include background(linear-gradient(top,  lighten($unicorn-btn-background, 2%), darken($unicorn-btn-background, 2%)));
            background-color: $unicorn-btn-background;
            color: $unicorn-btn-color;
            border: 1px solid darken($unicorn-btn-background, 10%);
            text-shadow: none;
            position: relative;
            top: 0px;

            &:hover {
                @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 12%), 0px 8px 3px rgba(0, 0, 0, .30));
                @include background(linear-gradient(top,  lighten($unicorn-btn-background, 8%), darken($unicorn-btn-background, 1%)));
                background-color: lighten($unicorn-btn-background, 10%);
            }
            &:active {
                @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-background, 10%), 0px 3px 3px rgba(0, 0, 0, .30));
                @include background(linear-gradient(top,  darken($unicorn-btn-background, 2%), lighten($unicorn-btn-background, 2%)));
                background-color: desaturate($unicorn-btn-background, 20%);
                color: darken($unicorn-btn-background, 20%);
                border: 1px solid darken($unicorn-btn-background, 5%);
                top: 5px;
            }
            &.disabled {
                @include box-shadow(none);
                -webkit-appearance: none;
            }
        }
    }


    /////////////////////////////
    //BORDER BUTTON STYLES //////
    ////////////////////////////
    @if $unicorn-btn-build-border {

        // .button-border-primary .button-border-action etc.
        #{$unicorn-btn-namespace}-border-#{$unicorn-btn-name} {
            @include box-shadow(none);
            @include transition-property(all);
            @include transition-duration(.3s);
            color: $unicorn-btn-background;
            border: 2px solid $unicorn-btn-background;
            background: none;
            text-shadow: none;

            &:hover {
                background: none;
                color: lighten($unicorn-btn-background, 10%);
                border: 2px solid lighten($unicorn-btn-background, 10%);
            }
            &:active {
                @include transition-duration(0s);
                background: none;
                color: darken($unicorn-btn-background, 10%);
                border: 2px solid darken($unicorn-btn-background, 10%);
            }
            &.disabled {
                @include box-shadow(none);
                -webkit-appearance: none;
            }
        }
    }

    //////////////////////////
    //FLAT BUTTON STYLES /////
    //////////////////////////
    @if $unicorn-btn-build-flat {
        // .button-flat-primary .button-flat-action etc.
        #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name} {
            @include box-shadow(none);
            @include transition-property(background);
            @include transition-duration(.3s);
            background: $unicorn-btn-background;
            color: $unicorn-btn-color;
            text-shadow: none;
            border: none;

            &:hover {
                background: lighten($unicorn-btn-background, 5%);
            }
            &:active {
                @include transition-duration(0s);
                background: desaturate($unicorn-btn-background, 20%);
                color: darken($unicorn-btn-background, 15%);
            }
            &.disabled {
                @include box-shadow(none);
                -webkit-appearance: none;
            }
        }
    }
}






//////////////////////////////////////////////////////////
// SIZES /////////////////////////////////////////////////
//////////////////////////////////////////////////////////

@each $unicorn-btn-size in $unicorn-btn-sizes {

    // .button-large .button-small .button-tiny
    #{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
        @if $unicorn-btn-size == 'jumbo' {
            font-size: $unicorn-btn-largefs + 5;
            height: $unicorn-btn-height * 1.6;
            line-height: $unicorn-btn-height * 1.6;
            padding: 0px ($unicorn-btn-height * 1.6) * .8;
        }

        @if $unicorn-btn-size == 'large' {
            font-size: $unicorn-btn-largefs;
            height: $unicorn-btn-height * 1.2;
            line-height: $unicorn-btn-height * 1.2;
            padding: 0px ($unicorn-btn-height * 1.2) * .8;
        }

        @if $unicorn-btn-size == 'small' {
            font-size: $unicorn-btn-smallfs;
            height: $unicorn-btn-height * .8;
            line-height: $unicorn-btn-height * .8;
            padding: 0px ($unicorn-btn-height * .8) * .8;
        }

        @if $unicorn-btn-size == 'tiny' {
            font-size: $unicorn-btn-tinyfs;
            height: $unicorn-btn-height * .7;
            line-height: $unicorn-btn-height * .7;
            padding: 0px ($unicorn-btn-height * .7) * .8;
        }
    }

    //HEIGHT NEEDED FOR FORM ELEMENTS +2px on height
    input#{$unicorn-btn-namespace}-#{$unicorn-btn-size}, button#{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
        @if $unicorn-btn-size == 'large' {
            height: ($unicorn-btn-height * 1.2) + 2;
        }

        @if $unicorn-btn-size == 'small' {
            height: ($unicorn-btn-height * .8) + 2;
        }

        @if $unicorn-btn-size == 'tiny' {
            height: ($unicorn-btn-height * .7) + 2;
        }
    }
}


//////////////////////////////////////////////////////////
// GLOWING BUTTON STYLES /////////////////////////////////
//////////////////////////////////////////////////////////
@if $unicorn-btn-build-glow {
    #{$unicorn-btn-namespace} {
        &#{$unicorn-btn-glow-namespace} {
            @include glow;
        }
        &#{$unicorn-btn-glow-namespace}:active {
            @include no_animation;
            @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
        }
    }
}


//////////////////////////////////////////////////////////
// DROPDOWN //////////////////////////////////////////////
//////////////////////////////////////////////////////////
@if $unicorn-btn-build-dropdown {
    #{$unicorn-btn-namespace}-dropdown {
        position: relative;
        overflow: visible;
        display: inline-block;

        //EXTRA STYLES FOR CARET
        .button {
            .icon-caret-down {
                font-size: 90%;
                margin: 0px 0px 0px 3px;
                vertical-align: middle;
            }
        }

        ul#{$unicorn-btn-namespace}-dropdown-menu-below {
            top: 115%;
        }
        ul#{$unicorn-btn-namespace}-dropdown-menu-above {
            bottom: 115%;
            top: auto;
        }

        //DROPDOWN MENU STYLES
        ul {
            @include box-shadow(0px 3px 6px rgba(0, 0, 0, 0.6));
            @include border-radius(3px);
            display: none;
            position: absolute;
            background: $unicorn-btn-dropdown-background;
            top: -2px;
            left: -2px;
            z-index: 1000;
            padding: 0px;
            margin: 0px;
            list-style-type: none;
            min-width: 102%;

            li {
                padding: 0px;
                margin: 0px;
                display: block;

                &:first-child a {
                     @include border-top-radius(3px);
                }
                &:last-child a {
                     @include border-bottom-radius(3px);
                }
            }

            //DROPDOWN MENU DIVIDER
            #{$unicorn-btn-namespace}-dropdown-divider {
                @include box-shadow(inset 0px 1px 0px #FFF);
                border-top: 1px solid #e4e4e4;
            }

            a {
                display: block;
                padding: 0px 20px;
                text-decoration: none;
                font-size: $unicorn-btn-tinyfs;
                color: $unicorn-btn-dropdown-link-color;
                line-height: 30px;
                white-space: nowrap;

                &:hover {
                    background-color: $unicorn-btn-dropdown-link-hover-background;
                    color: $unicorn-btn-dropdown-link-hover;
                }
            }
        }
    }
}
